<template>
  <div id="app">
    <router-view></router-view>
    <div class="roots">
      <div class="loginBox" @click="loginBack">
      </div>
      <div class="hint-phoneNameber">
        <section>
          <div>错误</div>
          <h4>请输入合法的手机号后重试</h4>
          <p>
            <button @click="makeSure">确认</button>
          </p>
        </section>
      </div>
      <div class="hint-psw">
        <section>
          <div>错误</div>
          <h4>请输入密码</h4>
          <p>
            <button @click="makeSure">确认</button>
          </p>
        </section>
      </div>
      <main class="login" @click="loginBack">
        <section @click.stop>
          <img src="http://www.songguolife.com/nuts/images/navLogo.png" alt="">
          <div>
            <div class="loginMethod">
              <img src="http://www.songguolife.com/nuts/images/login_wechat.png" alt="">
              <a
                href="https://open.weixin.qq.com/connect/qrconnect?appid=wxf50823c19e57dc16&redirect_uri=http%3A%2F%2Fwww.songguolife.com%2Fnuts&scope=snsapi_login&response_type=code&state=loginEnd">微信账号登录</a>
            </div>
          </div>
          <p class="or">或者</p>
          <div class="phoneNumber">
            <input type="text" placeholder="手机号" id="phoneNumber" v-model="name">
          </div>
          <div class="passWord">
            <input type="text" placeholder="密码" id="password" v-model="password">
          </div>
          <div class="forgetox">
            <p class="forget">忘记密码? ></p>
          </div>
          <div class="login-button-panel">
            <button class="login-button" @click="clickLogin">登录</button>
          </div>
        </section>
      </main>
    </div>
  </div>
</template>
<script>
  import bus from "./js/bus.js"
  // import axios from "axios"

  export default {
    name: 'App',
    data() {
      return {
        name:"",
        password:"",
      }
    },
    components: {},
    mounted() {
      bus.$on("login", this.login)
    },
    methods: {
      login() {
        $("body").css({
          overflowY: "hidden"
        })
        $(".roots").css({
          display: "block"
        })
      },
      loginBack() {
        $("body").css({
          overflow: "auto"
        })
        $(".roots").css({
          display: "none"
        })
      },
      clickLogin() {
        if (!$("#phoneNumber").val() && !$("#password").val()) {
          $(".hint-phoneNameber").css({
            display: "block"
          })
          $(".login").css({
            zIndex: 300
          })
        }
        if (!$("#password").val() && $("#phoneNumber").val()) {
          $(".login").css({
            zIndex: 300
          })
          $(".hint-psw").css({
            display: "block"
          })
        }
        if ($("#password").val() && $("#phoneNumber").val()) {
                    console.log(this.name)
                    var n= this.name
                    var p= this.password
          this.$http.get("/api/portal/me",{params :{mobile:"n",password:"p",Hm_lpvt_fd0cf774973698066937e95b6c219d11:"1545799173"}
      },{ credentials: true }).then(function (data) { 
            console.log(data)
          }, function (err) {
            console.log(err)
          })
        }
      },
      makeSure() {
        $(".hint-phoneNameber").css({
          display: "none"
        })
        $(".hint-psw").css({
          display: "none"
        })
        $(".login").css({
          zIndex: 700
        })
      }
    }
  }
</script>

<style>
  body {
    overflow-x: hidden;
  }

  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    box-sizing: border-box;
    color: #2c3e50;
  }

  .loginMethod a {
    text-decoration: none;
    color: rgb(255, 94, 43);
  }

  * {
    margin: 0;
    padding: 0;
  }

  .roots {
    display: none;
    transition: 5s;
    position: relative;
  }

  .loginBox {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    background-color: rgb(0, 0, 0);
    opacity: 0.6;
    text-align: center;
    z-index: 500;
  }

  .login {
    width: 100%;
    position: fixed;
    top: 0;
    margin-top: 40px;
    z-index: 700;
  }

  .login section {
    background-color: #fff;
    width: 360px;
    height: 370px;
    margin: 0 auto;
    text-align: center;
    padding: 10px 10px 20px 10px;
    border-radius: 6px;
  }

  .login section > img {
    width: 98px;
    height: 44px;
    margin: 15px 0;
  }

  .login section > div {
    width: 100%;
    margin: 20px 0 10px 0;
  }

  .login section > div > div {
    width: 140px;
    height: 30px;
    line-height: 30px;
    margin: 0 auto;
    border: 1px solid rgb(255, 94, 43);
    border-radius: 20px;
  }

  .login section > div img {
    width: 30px;
    height: 30px;
  }

  .or {
    font-size: 11px;
    color: #ccc;
  }

  .phoneNumber {
    width: 100%;
    height: 31px;
  }

  .phoneNumber input,
  .passWord input {
    width: 291px;
    height: 31px;
    padding: 4px;
    background-color: rgb(247, 244, 240);
    border: 1px solid rgb(222, 216, 208);
    border-radius: 3px;
    font-size: 12px;
  }

  .forgetox {
    width: 100%;
  }

  .forget {
    width: 291px;
    text-align: right;
    margin: 0 auto;
    font-size: 11px;
    color: rgb(255, 87, 34);
    font-weight: bolder;
  }

  .login-button-panel {
    width: 100%;
  }

  .login-button {
    width: 292px;
    height: 36px;
    background-color: rgb(255, 87, 34);
    color: #fff;
    border: none;
    border-radius: 3px;
    outline: none;
  }

  .hint-phoneNameber,
  .hint-psw {
    width: 100%;
    position: fixed;
    top: 40px;
    z-index: 1000;
    display: none;
  }

  .hint-phoneNameber section,
  .hint-psw section {
    width: 280px;
    height: 200px;
    background-color: #fff;
    margin: 0 auto;
    border-radius: 15px;
  }

  .hint-phoneNameber section div,
  .hint-psw section div {
    height: 50px;
    line-height: 50px;
    padding: 10px 15px;
    font-size: 17px;
  }

  .hint-phoneNameber section h4,
  .hint-psw section h4 {
    height: 70px;
    line-height: 70px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 0 15px;
    color: rgb(169, 68, 66);
  }

  .hint-phoneNameber section p,
  .hint-psw section p {
    margin: 0;
    height: 50px;
    line-height: 50px;
    padding: 0;
    text-align: right;
    padding: 0 15px;
  }

  .hint-phoneNameber section p button,
  .hint-psw section p button {
    width: 54px;
    height: 34px;
    border-radius: 3px;
    line-height: 34px;
    border: none;
    outline: none;
    background-color: dodgerblue;
    color: #fff;
  }
</style>
